<template>
    <!-- 搜索 -->
    <el-form :model="model" label-width="80px" class="noticeBodySearch">
        <el-row :gutter="20">
            <slot></slot>
            <template v-if="showSearch">
                <slot name="show"></slot>
            </template>
            <el-col :span="8" :offset="showSearch ? 0 : 8">
                <div class="noticeBodySearchBtn">
                    <el-button type="primary" @click="$emit('search')">搜索</el-button>
                    <el-button @click="$emit('reset')">重置</el-button>
                    <el-button type="primary" text @click="showSearch = !showSearch" v-if="hasShowSearch">
                        {{ showSearch ? "收起" : "展开" }}
                        <el-icon>
                            <ArrowUp v-if="showSearch" />
                            <ArrowDown v-else />
                        </el-icon>
                    </el-button>
                </div>
            </el-col>
        </el-row>
    </el-form>
</template>
<script setup>
import { ref, useSlots } from 'vue'

defineProps({
    model: Object
})
defineEmits(['search', 'reset'])
const showSearch = ref(false)

const slots = useSlots()
const hasShowSearch = ref(!!slots.show)
</script>
<style scoped lang="less">
.noticeBodySearch {
    margin-bottom: 10px;

    .noticeBodySearchBtn {
        display: flex;
        justify-content: end;
        align-items: center;
    }
}
</style>